<template>
    <div class="gooddetail" v-if="product && product.length != 0">
        <search/>
        <div class="goodtail-head">
            <div class="goodtail-title">
                <!-- 第一个版本不加面包屑 -->
                <!-- <Breadcrumb separator=">"> -->
                    <!-- <Breadcrumb-item to="/">首页</Breadcrumb-item> -->
                    <!-- 后台没加路径 -->
                    <!-- <Breadcrumb-item :to="{path:'/classificationlist',query: {productTypeId: path.superId}}">{{path.superName}}</Breadcrumb-item>
                    <Breadcrumb-item :to="{path:'/classificationlist',query: {productTypeId: path.superTwoId}}">{{path.superTwoName}}</Breadcrumb-item>
                    <Breadcrumb-item :to="{path:'/classificationlist',query: {productTypeId: path.productTypeId}}">{{path.productTypeName}}</Breadcrumb-item> -->
                <!-- </Breadcrumb> -->
            </div>
        </div>
        <div class="have" v-if="true">
            <!-- 商品图片 -->
            <div class="gooddetail-picture">
                <div class="gooddetail-left">
                    <div class="img-box" :style="{backgroundImage:'url('+active_good_info.pictureUrl+')'}">
                    </div>
                    <p class="telephone">
                        <span>售后联系电话：{{supportPhone}}</span>
                        <span>暂不支持退款／退货</span>
                    </p>
                </div>
                <div class="gooddetail-right">
                    <p class="good-title">{{productInfodata.proName}}</p>
                    <div class="gooddetail-right-pirce">
                        <div v-if="active_good_info.promotionPrice">
                            <div class="presentprice">
                                <span class="label">现价</span>
                                <span class="price">{{active_good_info.promotionPrice}}</span>
                                <span class="icon"><img src="../assets/img/discountPrice.png" alt=""></span>
                            </div>
                            <div class="originalprice">
                                <span class="label">原价</span>
                                <span class="price">￥{{active_good_info.salesPrice}}</span>
                            </div>
                        </div>  

                        <div v-if="!active_good_info.promotionPrice">
                            <div class="sale">
                                <span class="label">售价</span>
                                <span class="price">￥{{active_good_info.salesPrice}}</span>
                            </div>
                        </div>  
                    </div>
                    <div class="options">
                        <div>
                            <div class="label">商品型号：</div>
                            <div class="item">
                                <span class="lineheight">{{active_good_info.proModel}}</span>
                            </div>
                        </div>
                        <div class="spec">
                            <div class="label">商品参数：</div>
                            <div class="item">
                                <ul>
                                    <li :class="{active: index == specs_index}" v-for="(item,index) in product" :key="index" @click="chosee_specs(index)">{{item.proInfo}}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="distribution">
                            <div class="label">配送至：</div>
                            <div class="item">
                                <al-selector v-model="res_s" :level="1" style="display: inline-block;vertical-align:middle;margin-right:20px;"/>
                                <span style="line-height: 32px;">包邮</span>
                            </div>
                        </div>
                        <div class="num margin-bottom">
                            <div class="label">数量：</div>
                            <div class="item">
                                <div class="num-input">
                                    <div class="reduce" @click="reduce">
                                        <Icon type="minus-round"></Icon>
                                    </div>
                                    <span>{{num}}</span>
                                    <div class="add" @click="add">
                                        <Icon type="plus-round"></Icon>
                                    </div>
                                </div>
                                <span class="stock">库存{{active_good_info.proStock}}件</span>
                            </div>
                        </div>
                        <div class="num">
                            <div class="label">发货时间：</div>
                            <div class="item">
                                <span class="delivery">{{productInfodata.deliveryTime}}发货</span>
                            </div>
                        </div>
                        <div class="operation" v-if="active_good_info.proStock > 10">
                            <div class="label"></div>
                            <div class="item">
                                <button class="buy" @click="buynow">立即购买</button>
                                <button class="join-car" @click="joincar">加入购物车</button>
                            </div>
                        </div>
                        <!-- 如果当前库存少于10个，显示商品下架 -->
                        <div class="operation" v-if="active_good_info.proStock < 11">
                            <div class="label"></div>
                            <p>该商品已下架</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="detaile">
                <h5>商品详情</h5>
                <!-- 表格 -->
                <div class="thead">产品规格参数</div>
                <table class="table">
                    <tr v-for="(item,index) in productDescs" :key="index">
                        <td>{{item.descName}}</td>
                        <td>{{item.description}}</td>
                    </tr>
                </table>
            </div>
            <div class="show">
                <ul>
                    <li v-for="(item,index) in proPictures" :key="index" :style="{backgroundImage: 'url('+item.pictureUrl+')'}">
                    </li>
                </ul>
            </div>
        </div>
        <div class="un-have" v-if="false">
            <div class="unhave-imgage">
                <img src="../assets/img/pig.png" alt="">
            </div>
            <div class="unhave-warn">
                <p>亲爱的，很抱歉，小猪家的商品已经删除
                    <span class="other">其他商品</span>
                    <Icon type="ios-arrow-right"></Icon>
                    <Icon class="dent" type="ios-arrow-right"></Icon>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import Search from "../components/search.vue";
import { Icon, Breadcrumb, BreadcrumbItem, Select, Option } from "iview";
import { productInfo, shoppingcartdel } from "../http/api";
export default {
    components: {
        Search,
        Breadcrumb,
        BreadcrumbItem,
        Select,
        Option,
        Icon
    },
    data() {
        return {
            product: null, //商品信息
            path: null, //导航信息
            specs_index: null,
            res_s: [],
            num: 1,
            active_good_info: null,
            proPictures: null,
            productDescs: null,
            productInfodata:null,
            supportPhone:"",  //售后电话
        };
    },
    methods: {
        chosee_specs(index) {
            this.specs_index = index;
            this.active_good_info = this.product[index];   
        },
        joincar() {
            shoppingcartdel({
                operationType: "insert",
                proId: this.active_good_info.productId,
                commodityNum: this.num,
                brandId: this.productInfodata.brandId,
                proCode:this.active_good_info.proCode
            }).then(response => {
                if (response.data.status == 1000) {
                    this.$store.commit('shopcar')
                    this.$Message.success({
                        content: "添加成功，请及时付款哦!",
                        duration: 1.5
                    });
                }
            });
            
        },
        buynow() {
            // console.log(this.active_good_info);
            let goodArr = [];
            goodArr.push({
                proCode: this.active_good_info.proCode,
                commodityNum: this.num
            });
            this.$router.push({
                path: "/submitorder",
                //进到下个页面的时候有30分钟提示弹窗，只显示一次，传入tishi字段控制
                query: { confirmInfo: JSON.stringify(goodArr),tishi:1 }
            });
        },
        api_productInfo() {
            let productId = this.$route.query.productId;
            productInfo({ productId: productId }).then(response => {
                    this.product = response.data.productDetails;
                    this.active_good_info = response.data.productDetails[0];
                    this.path = response.data.path;
                    this.proPictures = response.data.proPictures;
                    this.productDescs = response.data.productDescs;
                    this.productInfodata = response.data.productInfo
                    this.supportPhone = response.data.supportPhone
                    this.chosee_specs(0);
            });
        },
        reduce() {
            if (this.num <= 1) {
                return false;
            } else {
                this.num--;
            }
        },
        add() {
            this.num++;
        }
    },
    created() {
        this.api_productInfo();
    }
};
</script>
<style lang="less">
@import "../assets/styles/gooddetail.less";
</style>

